import React from 'react';
import classnames from 'classnames';
import { Flex, NavBar, Button, Icon } from 'antd-mobile';
import Profession from 'entity/Profession';
import { useHistory } from 'react-router-dom';
import Professions from 'modules/eox/json/profession.json';
import styles from './professions.module.less';

export interface IProfessionsProp {}

/** 职业 */
export const ProfessionsFC = (props: IProfessionsProp) => {
  const history = useHistory();
  return (
    <div className={styles.root}>
      <NavBar
        icon={<Icon type="left" />}
        onLeftClick={() => { history.goBack(); }}
      >
        职业

      </NavBar>
      <Flex wrap="wrap" className="btns-grid" style={{ paddingBottom: 100 }}>
        {
          Professions.map((o:Profession) => (
            <Button
              className="btn-nostyle"
              style={{ width: '50%' }}
              key={o.origin}
              activeStyle={false}
              onClick={() => history.push(`/eox/professions/${o.english}`)}
            >
              <div
                className={
                  classnames(styles.content, 'mg-4', styles[o.english])
                }
              >
                <div className={classnames(styles.innter, 'pd-4')}>
                  <div className={classnames('flex-1')}>
                    <ruby>
                      <span className={classnames(styles.small, 'pdr-8')}>{o.origin}</span>
                      <rt>{o.english}</rt>
                    </ruby>
                  </div>
                  <span className={classnames('mgl-4 mg-auto')}>{o.name}</span>
                </div>
              </div>
            </Button>
          ))
        }
      </Flex>
    </div>
  );
};

export default ProfessionsFC;
